<template>
  <div v-cloak>
      <el-row>
          <el-col :span="4">
              <div class="crumbs">
                  <el-breadcrumb separator="/">
                      <el-breadcrumb-item :to="{ path: '/main/' }" class="a"><div class="c">房源基建</div></el-breadcrumb-item>
                  </el-breadcrumb>
              </div>
          </el-col>
          <el-col :span="1">
              <el-button type="primary" size="mini" class="btn1" @click="dialogForm1Visible=true" circle><div class="btn1_text">添加园区</div></el-button>
          </el-col>
      </el-row>
      <el-container class="ts">
          <el-main class="std" >
              <el-table
                      :data="users"
                      style="width: 100%"
                      border:true
                      stripe>
                  <el-table-column
                          label="园区名称"
                          width:406px
                          prop="nameYq">
                  </el-table-column>
                  <el-table-column
                        label="校区名称"
                        width:366px
                        prop="xiaoquYq">
                  </el-table-column>
                  <el-table-column
                        label="楼栋总数"
                        width="200px"
                        type="index"
                        :index="indexMethod1">
                  </el-table-column>
                  <el-table-column
                      label="房间总数"
                      width="200px"
                      type="index"
                      :index="indexMethod3">
                  </el-table-column>
                  <el-table-column
                      label="床位总数"
                      width="200px"
                      type="index"
                      :index="indexMethod2">
                  </el-table-column>
              </el-table>

          </el-main>
          <el-footer class="std2" >
              <el-pagination class="btm_choseBox"
                             background
                             @size-change="handleSizeChange"
                             @current-change="handleCurrentChange"
                             :current-page="query.PageNo"
                             :page-sizes="[10,20,50,100]"
                             :page-size="query.pagesize"
                             layout="total, sizes, prev, pager, next"
                             :total="total">
              </el-pagination>
          </el-footer>
      </el-container>
      <el-dialog title="添加园区" :visible.sync="dialogForm1Visible">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
              <el-form-item label="园区名称" prop="nameYq">
                  <el-input v-model="ruleForm.nameYq"></el-input>
              </el-form-item>
              <el-form-item label="所在校区" prop="xiaoquYq">
                  <el-input v-model="ruleForm.xiaoquYq"></el-input>
              </el-form-item>
              <el-button type="primary"  style="position: absolute;right: 16px" @click="submitForm(ruleForm)">确 定</el-button>
                  <el-button style="position: absolute;right: 100px" @click="dialogForm1Visible = false">取 消</el-button>
          </el-form>
      </el-dialog>
  </div>
</template>

<script>
import {bedNumberList, yqList, buildingNumberList, insertYq, roomNumberList} from '../../../../api/user'
// import {time} from 'echarts'

export default {
  name: 'second',
  data () {
    return {
      dataLoaded: false,
      dialogForm1Visible: false,
      query: {
        idYq: '',
        nameYq: '',
        xiaoquYq: '',
        PageNo: 1,
        pagesize: 10
      },
      query2: {
        idYq: '',
        bedNumber4Yq: ''
      },
      query3: {
        idYq: '',
        buildingNumber: ''
      },
      query4: {
        idYq: '',
        roomNumber: ''
      },
      users: [],
      bedNumbers: [],
      roomNumbers: [],
      buildingNumbers: [],
      yqData: {
        nameYq: '',
        xiaoquYq: ''
      },
      total: 0,

      ruleForm: {
        nameYq: '',
        xiaoquYq: ''
      },
      rules: {
        nameYq: [
          { required: true, message: '请输入园区名称', trigger: 'blur' }
        ],
        xiaoquYq: [
          { required: true, message: '请输入校区', trigger: 'blur' }
        ],
        form: {
          name: '',
          campus: ''
        },
        formLabelWidth: '120px'
      }
    }
  },

  methods: {
    getYqList () {
      yqList(this.query).then(res => {
        console.info(res)
        this.users = res.data.records
        this.total = res.data.total
      })
    },
    handleSizeChange: function (size) {
      this.query.pagesize = size
      this.getYqList()
    },
    handleCurrentChange: function (currentPage) {
      this.query.pageNo = currentPage
      this.getYqList()
    },
    submitForm (formName) {
      insertYq(formName).then(res => {
        if (res.data) {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.getYqList()
          this.dialogForm1Visible = false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    getBuildingNumber () {
      buildingNumberList(this.query3).then(res => {
        console.info(res)
        this.buildingNumbers = res.data
      })
    },
    getBedNumber () {
      bedNumberList(this.query2).then(res => {
        console.info(res)
        this.bedNumbers = res.data
      })
    },
    getRoomNumber () {
      roomNumberList(this.query4).then(res => {
        console.info(res)
        this.roomNumbers = res.data
      })
    },

    indexMethod1 (index) {
      let n0 = 0
      for (var i = 0; i < this.buildingNumbers.length; i++) {
        if (this.buildingNumbers[i].idYq === this.users[index].idYq) { n0 = this.buildingNumbers[i].buildingNumber; break }
      }
      return n0
    },
    indexMethod2 (index) {
      let n0 = 0
      for (var i = 0; i < this.bedNumbers.length; i++) {
        if (this.bedNumbers[i].idYq === this.users[index].idYq) { n0 = this.bedNumbers[i].bedNumber4Yq; break }
      }
      return n0
    },
    indexMethod3 (index) {
      let n0 = 0
      for (var i = 0; i < this.roomNumbers.length; i++) {
        if (this.roomNumbers[i].idYq === this.users[index].idYq) { n0 = this.roomNumbers[i].roomNumber; break }
      }
      return n0
    },
    fetchData () {
      this.getYqList()
      this.getBedNumber()
      this.getBuildingNumber()
      this.getRoomNumber()
    }
  },
  created () {
    this.fetchData().then(() => {
      this.dataLoaded = true
    })
  },
  mounted () {

  }

}
</script>
<style lang="less" scoped>
@import "../../../../assets/styles/pages";
.demo-ruleForm{
    height: 260px;
}
.v-cloak{
    display: none;
}
.c{
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.19px;
    text-align: left;
    color: #1a1a1a;
}
.ts{
    display: flex;
    height: 100%;
    width: 100%;
}
</style>
